<template>
    <view>
        <scroll-view :scroll-y="true" :style="'height:' + height + 'px'" @scrolltolower="more">
            <view class="card-container">
                <view class="table">
                    <view class="tr">
                        <view class="th">收费项</view>
                        <view class="th">价格</view>
                        <view class="th">修改</view>
                    </view>
                    <view class="tr" v-for="(item, index) in lists" :key="index">
                        <view class="td">{{ item.consumablesName }}</view>

                        <view class="td">￥{{ item.amount }}</view>

                        <view class="td">
                            <image :src="shopimgUrl + 'del.png'" @tap="del" :data-item="index"></image>
                            <image :src="shopimgUrl + 'update.png'" @tap="update" :data-item="index"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="addbtn" @tap="onAdd">新增</view>
        </scroll-view>
        <view class="savebtn" @tap="onSave">保存并退出</view>
    </view>
</template>

<script>
// pages/order/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            lists: [],
            height: 0,
            shopimgUrl: app.globalData.shopimgUrl
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.onLoadClone3389(options);
    },
    onShow: function () {
        let data = uni.getStorageSync('marketadd');

        if (!data) {
            return;
        }

        let list = this.lists || [];
        data = JSON.parse(data);

        if (data.id) {
            for (var index in list) {
                if (index == data.id) {
                    list[index].consumablesName = data.consumablesName;
                    list[index].amount = data.amount;
                }
            }
        } else {
            list.push(data);
        }

        this.setData({
            lists: list
        });
        this.dataChange();
        uni.removeStorageSync('marketadd');
    },
    methods: {
        /**
         * 生命周期函数--监听页面加载
         */
        onLoadClone3389: function (options) {
            uni.getSystemInfo({
                success: (res) => {
                    this.setData({
                        height: res.windowHeight - 100
                    });
                }
            });
            let storeId = uni.getStorageSync('storeId');

            _request
                .get('/Consumables/getStoreConsumables', {
                    storeId: storeId
                })
                .then((res) => {
                    var lists = res.data.data;
                    var type = options.type;

                    if (type == 'add') {
                        var id = options.id;
                        var amount = options.amount;
                        var consumablesName = options.consumablesName;

                        if (id && id != 'undefined') {
                            for (let i = 0; i < lists.length; i++) {
                                if (lists[i]['id'] == id) {
                                    lists[i]['consumablesName'] = consumablesName;
                                    lists[i]['amount'] = amount;
                                }
                            }
                        } else {
                            lists.push({
                                amount: amount,
                                consumablesName: consumablesName
                            });
                        }
                    }

                    this.setData({
                        lists: lists
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        onAdd: function () {
            uni.navigateTo({
                url: '/pages/marketadd/index'
            });
        },

        del: function (e) {
            let index = e.currentTarget.dataset.item;
            var listsTemp = [];
            listsTemp = this.lists;
            listsTemp.splice(index, 1);
            let that = this;
            uni.showModal({
                title: '提示',
                content: '真的要删除吗？',

                success(res) {
                    if (res.confirm) {
                        that.setData({
                            lists: listsTemp
                        });
                        that.dataChange();
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },

        update: function (e) {
            let index = e.currentTarget.dataset.item;
            var market = this.lists[index];
            uni.navigateTo({
                url: '/pages/marketadd/index?id=' + index + '&consumablesName=' + market['consumablesName'] + '&amount=' + market['amount']
            });
        },

        onSave: function () {
            let data = [];

            for (let i = 0; i < this.lists.length; i++) {
                let item = {
                    consumablesName: this.lists[i]['consumablesName'],
                    amount: this.lists[i]['amount']
                };
                data.push(item);
            }

            let storeId = uni.getStorageSync('storeId');

            _request
                .postObj('/Consumables/saveAll', {
                    storeId: storeId,
                    data: data
                })
                .then((res) => {
                    uni.showToast({
                        title: '保存成功',
                        icon: 'success',
                        duration: 2000,
                        success: function () {
                            uni.disableAlertBeforeUnload();
                            let pages = getCurrentPages();
                            let prevPage = pages[pages.length - 2];
                            prevPage.onLoad();
                            uni.navigateBack({
                                delta: 1
                            });
                        }
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        dataChange() {
            uni.enableAlertBeforeUnload({
                message: '内容未保存, 请确认是否返回?'
            });
        },

        more() {
            console.log('占位：函数 more 未声明');
        }
    }
};
</script>
<style>
.card-container {
    display: flex;
    flex-direction: column;
    /* box-shadow: 0px 2px 4px 2px #ddd; */
    border-width: 0rpx;
    margin: 30rpx;
    border-radius: 10rpx;
    background-color: #fff;
}

.td image {
    width: 40rpx;
    height: 40rpx;
    margin: 0 10rpx;
    padding: 0 10rpx;
}

.table {
    border: 1px solid #fbefe4;
    border-right: 0;
    border-bottom: 0;
    width: 98%;
}
.tr {
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: #666;
}
.th,
.td {
    padding: 10px;
    border-bottom: 1px solid #fbefe4;
    border-right: 1px solid #fbefe4;
    text-align: center;
    width: 100%;
}
.th {
    font-weight: 400;
    background-color: #fbefe4;
    color: #ff8722;
}

.addbtn {
    width: 180rpx;
    height: 60rpx;
    background: #fff;
    border: 1px solid #ff8722;
    border-radius: 45rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 60rpx;
    text-align: center;
    /* margin: 30rpx 30rpx 0 30rpx; */
    position: relative;
    /* top: 30rpx; */
    left: 285rpx;
}

.savebtn {
    width: 690rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    line-height: 90rpx;
    text-align: center;
    margin: 30rpx 30rpx 0 30rpx;
    position: fixed;
    bottom: 80rpx;
    z-index: 9999;
}

.horizon {
    width: 90%;
    height: 1px;
    background-color: #e5e5e5;
    vertical-align: middle;
    position: relative;
    margin: 0 auto;
}

page {
    background-color: #fbfbfb;
}
</style>
